<template lang="html">
  <div class="">
      <Editor id="tinymce" v-model="tHtml" :init="editorInit"></Editor>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/modern/theme';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/plugins/image';
import 'tinymce/plugins/imagetools';
import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/contextmenu';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/colorpicker';
import 'tinymce/plugins/textcolor';
import axios from 'axios';
import qs from 'qs';
export default {
  data(){
    return {
      editorInit: {
          language_url: require('./zh_CN.js'),
          language: 'zh_CN',
          skin_url: '/static/tinymce/skins/lightgray',
          height: 300,
          automatic_uploads: true,
          plugins: 'link lists image imagetools code table colorpicker textcolor wordcount contextmenu',
          toolbar:'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
          images_upload_handler: (blobInfo, success, failure) => {
              let formdata = new FormData();
              formdata.set('file', blobInfo.blob());
              this.$http.uploadImg(formdata).then(res => {
                if(res.data.code == 0){
                  success(res.data.data);
                }else{
                  this.$message.success(res.data.msg);
                }
              }).catch(res => {
                failure('error');
              })
          }
      },
      tHtml: this.tinymceHtml
    }

  },
  watch:{
    tinymceHtml:function () {
      this.tHtml = this.tinymceHtml
    }
  },
  props:['tinymceHtml'],
  mounted(){
    tinymce.init({})
  },
  components: {Editor},
  methods: {

  }
}
</script>

<style lang="css" scoped>
</style>
